<script setup lang="ts">

</script>

<template>
  <div class="content">
    <div class="content-1">
      <p>《前端框架应用项目开发》期末作品投票</p>
      <button class="action-button">投票</button>
      <button class="action-button">排名</button>
    </div>
    <div class="content-2">
      <p>简介：《前端框架应用项目开发》期末作品投票，其中评审评分占50%，同学评分占50%</p>
    <p>投票时间：2024年5月15日0:00:00结束时间：2024年5月20日0:00:00</p>
    </div>
  </div>
</template>

<style scoped>
.content{
  margin-top: 5vh;
  margin-left: 10vw;
  width: 60vw;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 0 10px grey;
}
.content-1 {
  display: flex;
  align-items: center;
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  p{
    margin-right: 1vw;
  }
}
.content-2{
  font-size: 16px;
  p{
    color: #3d3d3d;
  }
}
.action-button{
  margin-right: 1vw;
  background-color: #3f9dfd;
  border: none;
  color: white;
  font-size: 0.8rem;
  padding: 0.3rem 0.9rem;
  border-radius: 5px;
}
</style>